# MCP Server

## 介绍

@rsdoctor/mcp-server 是一个 MCP Server，旨在帮助用户更便捷地使用 Rsdoctor 的构建数据。它可以与 Rsdoctor 的本地构建分析数据配合使用，通过问答的形式，帮助你快速获取构建分析结果。

## 主要功能

**@rsdoctor/mcp-server** 提供四大类核心分析能力：

- **产物信息分析**: 分析构建产物的体积、组成等信息
- **依赖问题分析**: 分析项目依赖关系、重复依赖、Tree Shaking 等问题
- **产物优化建议**: 提供产物体积优化、代码分割等建议
- **编译优化建议**: 分析编译耗时，提供编译性能优化建议

## 使用示例

### 1. 产物优化分析

通过提问 "Please help me to optimize the bundle or artifacts"，工具会分析构建产物并给出优化建议。

示例视频:

<video
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/mcp-bundle-optimize-2.mp4"
  style={{
    width: '100%',
    height: 'auto',
    maxHeight: '50vh',
    objectFit: 'cover',
    display: 'block',
  }}
  autoPlay={true}
  muted={true}
  controls={true}
  loop={true}
  playsInline
/>

### 2. 依赖分析

通过提问 "Please investigate the referrer dependency of node_modules/dayjs/index.js"，工具会分析指定模块的依赖关系。

示例视频:

<video
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/issuer-path.mp4"
  style={{
    width: '100%',
    height: 'auto',
    maxHeight: '50vh',
    objectFit: 'cover',
    display: 'block',
  }}
  autoPlay={true}
  muted={true}
  controls={true}
  loop={true}
  playsInline
/>

### 3. 编译性能分析

通过提问 "Please help me find files or loaders with high compilation time and provide optimization suggestions"，工具会分析编译耗时并给出优化建议。

示例视频:

<video
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/loader-mcp.mp4"
  style={{
    width: '100%',
    height: 'auto',
    maxHeight: '50vh',
    objectFit: 'cover',
    display: 'block',
  }}
  autoPlay={true}
  muted={true}
  controls={true}
  loop={true}
  playsInline
/>

### 4. Tree shaking 问题

通过提问 "Please help me to check why react-dom/client.js can not be tree-shaken?"，工具会帮忙分析该模块没有被 Tree shaking 的原因。

> 注意：请使用 1.1.5 及以上版本的 Rsdoctor 插件。

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
  alt="tree-shaking"
/>

## 快速开始

### 💡 版本要求

:::warning
需要使用以下 rsdoctor 插件（版本要求）：

- @rsdoctor/rspack-plugin >= 1.1.2
- @rsdoctor/webpack-plugin >= 1.1.2

注意：请确保使用最新版本以获得最佳体验。
:::

### 1. 插件配置

如果还没有添加 Rsdoctor 插件，那么需要在项目中配置，[👉🏻 快速开始](https://rsdoctor.rs/guide/start/quick-start)。

### 2. 开启 Rsdoctor 并执行本地构建

开启 Rsdoctor 的情况下，执行构建。**不要使用 MCP Client 启动项目，因为 Rsdoctor 挂载的本地服务会卡住 MCP Client 的对话进程**。

```bash
# 开启 Rsdoctor

RSDOCTOR=true npm run build
```

- 注：如果配置了 `disableClientServer: true`，需要修改为 `disableClientServer: false`，disableClientServer 默认是 false。

### 3. 启动 MCP Server

#### Cursor

<div style={{ display: 'inline-block', marginTop: 16 }}>
  <a href="cursor://anysphere.cursor-deeplink/mcp/install?name=rsdoctor&config=eyJjb21tYW5kIjoibnB4IC15IEByc2RvY3Rvci9tY3Atc2VydmVyQGxhdGVzdCJ9">
    <img
      src="https://cursor.com/deeplink/mcp-install-dark.svg"
      alt="将 Rsdoctor MCP 服务器添加到 Cursor"
      height="32"
    />
  </a>
</div>

1. 在项目根目录创建 `.cursor/mcp.json`：

```json
{
  "mcpServers": {
    "rsdoctor": {
      "command": "npx",
      "args": ["-y", "@rsdoctor/mcp-server@latest"]
    }
  }
}
```

2. 重启 Cursor 编辑器
3. 在 MCP 面板中开始交互

#### VS Code / GitHub Copilot

<div style={{ display: 'inline-block', marginTop: 16 }}>
  <a href="vscode:mcp/install?%7B%22name%22%3A%22rsdoctor%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40rsdoctor%2Fmcp-server%40latest%22%5D%7D">
    <img
      src="https://img.shields.io/badge/VS_Code-Install_Rsdoctor_MCP-0098FF?style=flat-square&logo=visualstudiocode&logoColor=ffffff"
      alt="在 VS Code 中安装"
    />
  </a>
</div>

1. 在项目根目录创建 `.vscode/mcp.json`，GitHub Copilot 默认会自动加载 MCP Server 配置

```json
{
  "mcpServers": {
    "rsdoctor": {
      "command": "npx",
      "args": ["-y", "@rsdoctor/mcp-server@latest"]
    }
  }
}
```

2. 在 Copilot Chat 面板中选择 [Agent 模式](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode#_use-agent-mode)，然后开始交互。

#### Claude

在 `claude_desktop_config.json` 中添加配置：

```json
{
  "mcpServers": {
    "rsdoctor": {
      "command": "npx",
      "args": ["-y", "@rsdoctor/mcp-server@latest"]
    }
  }
}
```

#### Cline

在配置文件中添加：

```json
{
  "mcpServers": {
    "rsdoctor": {
      "command": "npx",
      "args": ["-y", "@rsdoctor/mcp-server@latest"]
    }
  }
}
```

#### Trae

可在「创建智能体」- 「MCP」-「添加」-「手动添加」中配置添加：

```json
{
  "mcpServers": {
    "rsdoctor": {
      "command": "npx",
      "args": ["-y", "@rsdoctor/mcp-server@latest"]
    }
  }
}
```

目前已在 Trae CN MCP 市场中发布，除了手动配置外，也可以通过市场搜索 「rsdoctor-mcp」进行添加并使用。

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/trae-mcp.png"
  alt="trae-mcp"
  style={{
    width: '90%',
    height: 'auto',
    maxHeight: '50vh',
    objectFit: 'cover',
    display: 'block',
  }}
/>

## 配置说明

### 命令行参数

| 参数       | 说明                   | 默认值                                                      | 示例             |
| ---------- | ---------------------- | ----------------------------------------------------------- | ---------------- |
| `compiler` | 指定要分析的编译器名称 | 自动检测                                                    | `--compiler web` |
| `port`     | 指定 MCP Server 端口   | 最新启动的端口号（写入到 ` ~/.cache/rsdoctor/mcp.json` 中） | `--port 1000`    |

### 多编译器项目配置

在多编译器项目中，每个编译器会有一份 Rsdoctor 构建分析数据。使用 `--compiler` 参数指定要分析的编译器：

```bash
npx @rsdoctor/mcp-server@latest --compiler web
```

### 端口配置

1. 配置 MCP Server 端口：

```bash
npx @rsdoctor/mcp-server@latest --port 1000
```

2. 配置 Rsdoctor 本地服务端口：

```js
new RsdoctorRspackPlugin({
  port: 9988,
});
```

## Tools 介绍

### 产物分析工具

| 工具                     | 说明                 | 参数             |
| ------------------------ | -------------------- | ---------------- |
| `get_chunks`             | 获取所有代码块信息   | -                |
| `get_chunk_by_id`        | 获取特定代码块信息   | chunkId (Number) |
| `get_large_chunks`       | 获取体积过大的代码块 | -                |
| `get_media_asset_prompt` | 获取媒体资源优化建议 | -                |

### 依赖分析工具

| 工具                       | 说明             | 参数                |
| -------------------------- | ---------------- | ------------------- |
| `get_modules`              | 获取所有模块信息 | -                   |
| `get_module_by_id`         | 获取模块信息     | moduleId (Number)   |
| `get_module_by_path`       | 根据路径获取模块 | modulePath (String) |
| `get_module_issuer_path`   | 获取模块来源路径 | moduleId (String)   |
| `get_package_info`         | 获取包信息       | -                   |
| `get_package_dependencies` | 获取依赖列表     | -                   |
| `get_duplicate_packages`   | 获取重复包列表   | -                   |
| `get_similar_packages`     | 获取相似包列表   | -                   |

### 性能分析工具

| 工具                        | 说明                     | 参数 |
| --------------------------- | ------------------------ | ---- |
| `get_loader_time_all_files` | 获取文件 loader 耗时     | -    |
| `get_loader_times`          | 获取编译目录 loader 耗时 | -    |
| `get_rule_info`             | 获取构建规则扫描结果     | -    |

## 常见问题

### 1. 连接问题

**问题**: 无法连接到 Rsdoctor MCP Server 或没有成功返回数据

**解决方案**:

- 确保 Rsdoctor 本地 Server 已成功启动。
  - 手动启动本地 Server，请勿使用 MCP Client 启动项目，因为 Rsdoctor 的挂载的本地服务会卡住 MCP Client 的对话进程。
- 如果 Rsdoctor MCP server 使用了 `--port` 参数，请确保 Rsdoctor 的启动端口配置正确。
- 检查 Rsdoctor 插件版本是否符合要求。[版本要求](/guide/start/mcp#-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82)
